<template>
  <div id="home">
    <!-- 头部导航 -->
    <van-nav-bar fixed>
      <template #left>
        <i class="iconfont icon-jiahao" size="16" />
      </template>
      <template #title>
        <van-search
          placeholder="请输入搜索关键词"
          background="#fff"
          shape="round"
        />
      </template>
      <template #right>
        <i class="iconfont icon-bell" />
      </template>
    </van-nav-bar>
    <!-- 首页内容导航 -->
    <van-tabs v-model="active" class="home-nav">
      <!-- 关注内容 -->
      <van-tab title="关注" name="attention">
        <van-row>
          <van-list
            class="attention-list"
            :v-model="loading2"
            :finished="finished2"
            finished-text="没有更多了"
            @load="onLoad2"
            offset="1"
          >
            <van-cell class="recommend-cell">
              <van-col span="24" v-for="(item, i) of attention" :key="i">
                <div class="attention">
                  <!-- 用户部分 -->
                  <div class="van-clearfix">
                    <div class="attention-avatar">
                      <van-image
                        width="40"
                        height="40"
                        :round="true"
                        :src="item.avatar"
                      />
                    </div>
                    <div class="attention-name">{{item.name}}</div>
                    <div class="attention-more">
                      <van-icon name="ellipsis" />
                    </div>
                  </div>
                  <!-- 发表内容部分 -->
                  <div class="attention-content">
                    <div class="van-ellipsis">{{item.title}}</div>
                    <div class="van-multi-ellipsis--l3">{{item.describew}}</div>
                    <!-- 发表内容的图片 -->
                    <div class="attention-conten-img">
                      <van-row>
                        <van-col
                          class="attention-conten-img-n"
                          span="8"
                          v-for="(items, i) in item.img" :key="i"
                        >
                          <van-image
                            width="100%"
                            height="120px"
                            cover
                            :src="items"
                          />
                        </van-col>
                      </van-row>
                    </div>
                  </div>
                  <!-- 点赞部分 -->
                  <div class="laotie">
                    <div class="zan">
                      <van-icon name="good-job-o" size="22px" color="red" /><span
                        >{{item.praise}}</span
                      >
                    </div>
                    <div class="comment">
                      <van-icon name="chat-o" size="22px" /><span>评论</span>
                    </div>
                  </div>
                  <!-- 日期部分 -->
                  <div class="date">{{item.dateissued}}</div>
                </div>
              </van-col>
            </van-cell>
          </van-list>
        </van-row>
      </van-tab>

      <!-- 推荐内容 -->
      <van-tab title="推荐" name="recommend">
        <van-row type="flex" justify="space-between">
          <div class="recommend" van-clearfix>
            <div class="recommend-v">为你推荐</div>
            <van-list
              :v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
              offset="1"
            >
              <van-cell class="recommend-cell">
                <van-col
                  @click="clickcongeee(item.mu_id)"
                  span="12"
                  v-for="(item, i) in recommends"
                  :key="i"
                >
                  <div class="image">
                    <van-image
                      width="100%"
                      height="180px"
                      radius="8"
                      :src="item.mu_pic"
                    />
                    <!-- <img :src="item.mu_pic" alt="" srcset=""> -->
                  </div>
                  <div>
                    <div class="van-multi-ellipsis--l2">
                      {{ item.mu_introduce }}
                    </div>
                    <div class="author">
                      <van-image
                        width="35"
                        height="35"
                        :round="true"
                        :src="item.mu_avatar"
                      />
                      <div class="van-ellipsis">{{ item.mu_aname }}</div>
                    </div>
                  </div>
                </van-col>
              </van-cell>
            </van-list>
          </div>
        </van-row>
      </van-tab>

      <!-- 分类内容 -->
      <van-tab title="分类" name="classify">
        <van-tabs class="classify">
          <van-tab
            class="classify-child"
            v-for="index in 8"
            :key="index"
            :title="'标签 ' + index"
          >
            <div class="classify-child-box">
              <div class="classify-child-title">{{ index }}</div>
              <div class="classify-child-content">
                <div class="classify-child-img">
                  <van-image
                    width="100%"
                    height="150"
                    src="https://img01.yzcdn.cn/vant/cat.jpeg"
                  />
                </div>
                <div class="classify-child-intr">
                  <div class="title">标题{{ index }}</div>
                  <div class="van-multi-ellipsis--l3">
                    {{ index }}这是一段最多显示三行的文字，多余的内容会被省略
                    这是一段最多显示三行的文字，多余的内容会被省略
                    这是一段最多显示三行的文字，多余的内容会被省略
                    这是一段最多显示三行的文字，多余的内容会被省略
                  </div>
                  <div class="intr">
                    <div class="d1">
                      <van-image
                        width="35"
                        height="35"
                        :round="true"
                        src="https://img01.yzcdn.cn/vant/cat.jpeg"
                      />
                    </div>
                    <div class="d2">
                      <span>昵称{{ index }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </van-tab>
    </van-tabs>
    <myfooter></myfooter>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: "recommend", //默认首页

      /**首页推荐 */
      loading: false,
      finished: false,
      page: 1,
      recommends: [], // 首页推荐数据

      /**首页关注 */
      attention: [],  // 首页关注数据
      loading2: false,
      finished2: false,
      page2: 1,
    };
  },
  methods: {
    // 点击跳转到粥谱详情页 可带参数 id
    clickcongeee(cid) {
      this.$router.push(`/recipe?mu_id=${cid}`);
    },
    // 获取首页推荐数据
    onLoad() {
      console.log("onLoad...");
      this.axios.get(`/congee/recommend/${this.page}`).then((result) => {
        //console.log(result);
        let list = result.data.msg;

        list.forEach((item) => {
          item.mu_avatar = require(`../assets${item.mu_avatar}`);
          item.mu_pic = require(`../assets${item.mu_pic}`);
        });

        this.recommends = [...this.recommends, ...list];
        //console.log(this.recommends);
        // 加载状态结束
        this.loading = false;

        if (this.recommends.length >= 36) {
          this.finished = true;
        }
        this.page += 1;
      });
    },
    // 获取首页关注数据
    onLoad2() {
      console.log("onLoad2...");
      this.axios.get("/congee/focus/"+this.page2).then((result) => {
        //console.log(res);
        let list = result.data;

        this.attention = [...this.attention,...list];

        this.loading2 = false;

        if (this.attention.length >= 6) {
          this.finished2 = true;
        }
        this.page2 += 1;
      });
    },
  }
};
</script>

<style lang="scss" scoped>
#home {
  // 导航栏
  ::v-deep .van-nav-bar__title {
    margin: 0 auto;
    max-width: 100%;
    width: 82%;
  }
  ::v-deep .van-nav-bar {
    z-index: 10;
  }
  ::v-deep .van-search {
    padding: 0 10px;
  }
  // 首页内容导航
  ::v-deep .home-nav {
    margin-top: 46px;
  }

  /** 首页关注 **/
  .attention-list{
    .recommend-cell{
      padding: 0;
    }
    .attention {
      //margin-bottom: 50px;
      margin-top: 20px;
      padding-left: 10px;
      padding-right: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid #ddd;
      .attention-avatar {
        float: left;
      }
      .attention-name {
        float: left;
        line-height: 40px;
        margin-left: 10px;
        font-weight: bold;
      }
      .attention-more {
        float: right;
        margin-right: 5px;
      }
      // 发表的内容部分
      .attention-content {
        .van-ellipsis {
          font-weight: bold;
        }
        .attention-conten-img {
          margin-top: 5px;
          margin-bottom: 5px;
          border-radius: 20px 20px 27px 27px;
          overflow: hidden;
          .attention-conten-img-n {
            padding-right: 2px;
            padding-left: 2px;
          }
        }
      }
      // 点赞评论部分
      .laotie {
        display: flex;
        .zan {
          .van-icon {
            vertical-align: bottom;
          }
          span {
            margin-left: 4px;
          }
        }
        .comment {
          margin-left: 25px;
          .van-icon {
            vertical-align: bottom;
          }
          span {
            margin-left: 4px;
          }
        }
      }
      // 日期
      .date {
        margin-top: 5px;
        color: #95958f;
        font-size: 16px;
      }
    }
  }
  /** 首页推荐 **/
  .recommend {
    margin-bottom: 50px;
    .recommend-cell {
      padding: 0;
    }
    .recommend-v {
      margin-left: 10px;
      margin-top: 5px;
      margin-bottom: 5px;
      font-size: 18px;
    }
    // list
    .cell-tu {
      padding: 0;
      margin: 0;
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-between;
    }
    ::v-deep .van-col:nth-child(2n + 1) {
      margin-top: 5px;
      margin-bottom: 10px;
      padding-left: 10px;
      padding-right: 5px;
    }
    ::v-deep .van-col:nth-child(2n) {
      margin-top: 5px;
      margin-bottom: 10px;
      padding-left: 4px;
      padding-right: 10px;
    }
    // 大图
    ::v-deep .image {
      margin-bottom: px;
    }
    // 作者
    .author {
      display: flex;
      margin-top: 5px;
      .van-ellipsis {
        line-height: 35px;
        margin-left: 10px;
      }
    }
  }

  /** 首页分类 **/
  .classify {
    // 隐藏小横杠
    ::v-deep .van-tabs__line {
      display: none;
    }
    // 粥的分类
    ::v-deep .van-tab {
      background-color: #fafaf8;
      margin-right: 5px;
    }
    // 主要内容
    .classify-child-box {
      padding-left: 10px;
      padding-right: 10px;
      // 粥分类的名字
      .classify-child-title {
        font-size: 20px;
        margin-top: 5px;
        margin-bottom: 5px;
      }
      // 分类的主要内容
      .classify-child-content {
        display: flex;
        // 粥的图片
        .classify-child-img {
          width: 40%;
          font-size: 0;
          border-radius: 15px;
          overflow: hidden;
        }
      }
      // 粥的介绍
      .classify-child-intr {
        width: 60%;
        padding-left: 15px;
        // 粥的标题
        .title {
          font-size: 18px;
          margin-bottom: 5px;
        }
        // 粥的作者
        .intr {
          margin-top: 15px;
          // 头像
          .d1 {
            display: inline-block;
            vertical-align: top;
          }
          // 昵称
          .d2 {
            display: inline-block;
            height: 35px;
            line-height: 35px;
            margin-left: 5px;
            color: #95958f;
          }
        }
      }
    }
  }
}
</style>
